<template>
  <div>
    <ul>
      <li
        v-for="(item, index) in objarray"
        :key="item.id"
        @click="indextab = index"
      >
        <a :class="{ active: indextab === index }" href="#">{{ item.name }}</a>
      </li>
    </ul>
  </div>
</template>

<script setup>
import { ref } from "vue";
const objarray = [
  { id: 1, name: "京东秒杀" },
  { id: 2, name: "每日特价" },
  { id: 3, name: "品类秒杀" },
];
const indextab = ref(0);
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}
ul {
  display: flex;
  border-bottom: 2px solid red;
  padding: 0 10px;
}
li {
  width: 100px;
  height: 50px;
  line-height: 50px;
  list-style: none;
  text-align: center;
}
li a {
  display: block;
  /* 去除a标签的下划线 */
  text-decoration: none;
  font-weight: bold;
  color: #333;
}
/* 匹配所有的active */
li a.active {
  background-color: #e01222;
  color: #fff;
}
</style>
